<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>serve</title>

    <!-- 初始化样式 -->
    <link rel="stylesheet" href="../static/css/base.css" />
    <link rel="stylesheet" href="../static/css/serve.css" />
    <!-- 字体图标 -->
    <link rel="stylesheet" href="../static/font/iconfont.css">       
    <link rel="stylesheet" href="../static/lib/swiper-4.3.5.min.css" />
    <!-- 引入jquery -->
    <script src="../static/lib/jquery/jquery.min.js"></script>
    <script src="../static/lib/swiper-4.3.5.min.js"></script>
  </head>

  <body>
    <!-- 头部区域 -->
    <header id="header">
      <div class="top-nav clearfix">
        <div class="w clearfix">
          <div class="fl">
            <a href="#">小米商城</a> <a href="#">MIUI</a> <a href="#">LoT</a>
            <a href="#">云服务</a> <a href="#">金融</a> <a href="#">有品</a>
            <a href="#">小爱开发平台</a> <a href="#">政企服务</a>
            <a href="#">Select Region</a>
          </div>
          <div class="fr">
            <a href="./login.html">登录</a>
            <a href="./register.html">注册</a> <a href="#">消息通知</a>
            <a href="#" class="car"><span class="iconfont icon-gouwuche"></span> 购物车(0)
              <div class="car-content">购物车中还没有商品，赶紧选购吧！</div>
            </a>
          </div>
        </div>
      </div>
    </header>
    <!-- 导航区域 -->
    <nav id="nav">
      <div class="w clearfix">
        <div class="logo fl">
          <a href="#"><img src="../static/images/logo.png" alt=""/></a>
        </div>
        <div class="main-nav fl">
          <ul class="tab">
            <li><a href="#">小米手机</a></li>
            <li><a href="#">红米</a></li>
            <li><a href="#">电视</a></li>
            <li><a href="#">笔记本</a></li>
            <li><a href="#">空调</a></li>
            <li><a href="#">新品</a></li>
            <li><a href="#">路由器</a></li>
            <li><a href="#">智能硬件</a></li>
            <li><a href="#">服务</a></li>
            <!-- <li><a href="#">社区</a></li> -->
          </ul>
        </div>
        <div class="search fr">
          <input type="text" placeholder="请输入搜索内容" />
          <i class="iconfont icon-chakan"></i>
        </div>
      </div>
      <div class="nav-content clearfix">
        <div class="w clearfix">
          <ul class="clearfix">
            <li>A</li>
            <li>basd</li>
            <li>c</li>
            <li>asdd</li>
            <li>e</li>
            <li>fasd</li>
          </ul>
          <ul class="clearfix">
            <li>A213</li>
            <li>b</li>
            <li>asdc</li>
            <li>d</li>
            <li>asde</li>
            <li>f</li>
          </ul>
          <ul class="clearfix">
            <li>A</li>
            <li>214b</li>
            <li>c</li>
            <li>123d</li>
            <li>412e</li>
            <li>f</li>
          </ul>
          <ul class="clearfix">
            <li>324A</li>
            <li>2354b</li>
            <li>c</li>
            <li>4356d</li>
            <li>546e</li>
            <li>f</li>
          </ul>
          <ul class="clearfix">
            <li>A</li>
            <li>b54</li>
            <li>c</li>
            <li>546d</li>
            <li>e</li>
            <li>f</li>
          </ul>
          <ul class="clearfix">
            <li>A324</li>
            <li>b</li>
            <li>456c</li>
            <li>546d</li>
            <li>e</li>
            <li>f</li>
          </ul>
          <ul class="clearfix">
            <li>A</li>
            <li>546b</li>
            <li>c</li>
            <li>d567</li>
            <li>e</li>
            <li>f</li>
          </ul>
          <ul class="clearfix">
            <li>A324</li>
            <li>b34</li>
            <li>456</li>
            <li>d</li>
            <li>e</li>
            <li>f324</li>
          </ul>
        </div>
      </div>
    </nav>
    <!-- banner -->
    <div class="banner">
      <div class="w">
        <div class="breadcrumbs">
          <a href="../index.html">首页</a> / <a href="javascript:;">帮助中心</a>
        </div>
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <a href="./maintain.html"><img src="../static/images/serve-banner1.jpg" alt="" /></a>
            </div>
            <div class="swiper-slide">
              <a href="./maintain.html"><img src="../static/images/serve-banner2.jpg" alt="" /></a>
            </div>
          </div>
          <div class="swiper-pagination"></div>
        </div>
      </div>
    </div>
    <!-- 自助服务 -->
    <div class="service">
      <div class="w">
        <h1 class="title">自助服务</h1>
        <ul class="serviceList">
          <li class="serviceItem">
            <a href="javascript:;">
              <img src="../static/images/selfservice_icon1.png" alt="" />
              <h1 class="heading">申请售后服务</h1>
              <span>一键预约，快速维修</span>
            </a>
          </li>
          <li class="serviceItem">
            <a href="javascript:;">
              <img src="../static/images/selfservice_icon2.png" alt="" />
              <h1 class="heading">订单查询</h1>
              <span>购物信息，快速搜索</span>
            </a>
          </li>
          <li class="serviceItem">
            <a href="javascript:;">
              <img src="../static/images/selfservice_icon3.png" alt="" />
              <h1 class="heading">小米账户</h1>
              <span>重置密保，安全验证</span>
            </a>
          </li>
          <li class="serviceItem">
            <a href="javascript:;">
              <img src="../static/images/selfservice_icon4.png" alt="" />
              <h1 class="heading">保障服务</h1>
              <span>碎屏延保，双重保障</span>
            </a>
          </li>
          <li class="serviceItem">
            <a href="javascript:;">
              <img src="../static/images/selfservice_icon5.png" alt="" />
              <h1 class="heading">以旧换新</h1>
              <span>便捷交易，价格保障</span>
            </a>
          </li>
          <li class="serviceItem">
            <a href="javascript:;">
              <img src="../static/images/selfservice_icon6.png" alt="" />
              <h1 class="heading">申请售后服务</h1>
              <span>一键预约，快速维修</span>
            </a>
          </li>
          <li class="serviceItem">
            <a href="javascript:;">
              <img src="../static/images/selfservice_icon7.png" alt="" />
              <h1 class="heading">售后政策</h1>
              <span>条款说明，安心保障</span>
            </a>
          </li>
          <li class="serviceItem">
            <a href="javascript:;">
              <img src="../static/images/selfservice_icon8.png" alt="" />
              <h1 class="heading">查询真伪</h1>
              <span>辨别真伪，放心使用</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <!-- 产品支持 -->
    <div class="support">
      <div class="w">
        <h1 class="title">产品支持</h1>
        <ul class="supportList">
          <li class="supportItem">
            <a href="javascript:;">
              <img src="../static/images/supportItem1.jpg" alt="" />
              <h1 class="heading">小米手机</h1>
            </a>
          </li>
          <li class="supportItem">
            <a href="javascript:;">
              <img src="../static/images/supportItem2.png" alt="" />
              <h1 class="heading">红米手机</h1>
            </a>
          </li>
          <li class="supportItem">
            <a href="javascript:;">
              <img src="../static/images/supportItem3.jpg" alt="" />
              <h1 class="heading">小米平板</h1>
            </a>
          </li>
          <li class="supportItem">
            <a href="javascript:;">
              <img src="../static/images/supportItem4.jpg" alt="" />
              <h1 class="heading">智能硬件</h1>
            </a>
          </li>
          <li class="supportItem">
            <a href="javascript:;">
              <img src="../static/images/supportItem5.jpg" alt="" />
              <h1 class="heading">小米电视</h1>
            </a>
          </li>
          <li class="supportItem">
            <a href="javascript:;">
              <img src="../static/images/supportItem6.jpg" alt="" />
              <h1 class="heading">小米盒子</h1>
            </a>
          </li>
          <li class="supportItem">
            <a href="javascript:;">
              <img src="../static/images/supportItem7.jpg" alt="" />
              <h1 class="heading">小米路由</h1>
            </a>
          </li>
          <li class="supportItem">
            <a href="javascript:;">
              <img src="../static/images/supportItem8.jpg" alt="" />
              <h1 class="heading">小米电脑</h1>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <!-- 服务中心 -->
    <div class="serveCenter">
      <div class="w">
        <h2 class="title">服务中心</h2>
        <div class="wrap">
          <div class="left">
            <img src="../static/images/serviceCenter_img.jpg" alt="" />
          </div>
          <div class="right">
            <h1 class="rightTitle">售后网点</h1>
            <p class="purpose">
              小米售后，一站式为您提供售后服务。有售后，放心购是我们的服务宗旨。
            </p>
            <div class="icons">
              <div class="iconItem">
                <i class="iconfont icon-yuyuefuwu"></i>
                <p>预约服务</p>
              </div>
              <div class="iconItem">
                <i class="iconfont icon-1xiaoshikuaixiu24px "></i>
                <p>一小时快修</p>
              </div>
              <div class="iconItem">
                <i class="iconfont icon-ruanjianshengji"></i>
                <p>软件升级</p>
              </div>
              <div class="iconItem">
                <i class="iconfont icon-zixun"></i>
                <p>咨询体验</p>
              </div>
              <div class="iconItem">
                <i class="iconfont icon-mianduimiankaitong"></i>
                <p>面对面拆机</p>
              </div>
            </div>
            <a href="javascript:;" class="gridChek">网点查询 》</a>
          </div>
        </div>
      </div>
    </div>
    <!-- 常见问题 -->
    <div class="problem">
      <div class="w">
          <h1 class="title">常见问题</h1>
          <div class="problemSearch">
            <input type="text" placeholder="请输入要搜素的内容">
            <i class="iconfont icon-chakan"></i>
          </div>
          <ul class="titleList">
            <li class="titleItem active">账户管理</li>
            <li class="titleItem">购物指南</li>
            <li class="titleItem">订单操作</li>
            <li class="titleItem">售后服务</li>
            <li class="titleItem">其他产品咨询</li>
            <li class="titleItem">在线销售渠道</li>
          </ul>
          <ul class="problemsBox">
            <li class="problemsPanel active">
              <a href="javascrpt:;"> 小米账户如何注册</a>
              <a href="javascrpt:;"> 如何查询您身边的小米之家</a>
              <a href="javascrpt:;"> 小米分期相关问题</a>
              <a href="javascrpt:;"> 如何查询小米授权体验店</a>
              <a href="javascrpt:;"> 如何购买手机上门维修</a>
              <a href="javascrpt:;"> 米家互联网空调如何安装及收费标准？</a>
            </li>
            <li class="problemsPanel ">
              <a href="javascrpt:;"> A</a>
              <a href="javascrpt:;"> B</a>
              <a href="javascrpt:;"> c</a>
              <a href="javascrpt:;"> D</a>
              <a href="javascrpt:;"> E</a>
              <a href="javascrpt:;"> F</a>
            </li>
            <li class="problemsPanel ">
              <a href="javascrpt:;"> G</a>
              <a href="javascrpt:;"> H</a>
              <a href="javascrpt:;"> I</a>
              <a href="javascrpt:;"> J</a>
              <a href="javascrpt:;"> K</a>
              <a href="javascrpt:;"> O</a>
            </li>
            <li class="problemsPanel ">
              <a href="javascrpt:;"> 1</a>
              <a href="javascrpt:;"> 2</a>
              <a href="javascrpt:;"> 3</a>
              <a href="javascrpt:;"> 4</a>
              <a href="javascrpt:;"> 5</a>
              <a href="javascrpt:;"> 6</a>
            </li>
            <li class="problemsPanel ">
              <a href="javascrpt:;"> 11</a>
              <a href="javascrpt:;"> 22</a>
              <a href="javascrpt:;"> 33</a>
              <a href="javascrpt:;"> 44</a>
              <a href="javascrpt:;"> 55</a>
              <a href="javascrpt:;"> 66</a>
            </li>
            <li class="problemsPanel ">
              <a href="javascrpt:;"> a</a>
              <a href="javascrpt:;"> b</a>
              <a href="javascrpt:;"> c</a>
              <a href="javascrpt:;"> d</a>
              <a href="javascrpt:;"> e</a>
              <a href="javascrpt:;"> f</a>
            </li>
          </ul>
      </div>
    </div>
    <!-- 脚注区域 -->
    <footer id="footer">
      <div class="w">
          <div class="fuwu">
              <ul class="clearfix">
                  <li><a href="#">预约维修服务</a></li>
                  <li><a href="#">七天无理由退货</a></li>
                  <li><a href="#">十五天免费换货</a></li>
                  <li><a href="#">满150包邮</a></li>
                  <li><a href="#">520余家网点</a></li>
              </ul>
              <div class="logo">
                  <img src="../static./images/logo.png" alt="">
                  <p>探索黑科技，小米为发烧而生！</p>
              </div>
          </div>
      </div>
  </footer>
    <script src="../static/js/serve.js"></script>
  </body>
</html>
